<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, i) in lis" :key="item.icon"
        ><div class="grid-content bg-purple">
          <i class="iconfont" :class="item.icon" :style="{ color: cor[i] }"></i>
          <div>
            <p>{{ item.tex }}</p>
            <p>{{ item.money }}</p>
          </div>
        </div>
      </el-col>
    </el-row>

    <div id="main"></div>
  </div>
</template>

<script>
import Echarts from 'echarts'
import { totaldata } from '../../api/info.js'
export default {
  data() {
    return {
      cor: [' #1296db', '#d4237a', '#1296db', '#1afa29'],
      lis: [
        { icon: 'icon-icon-', tex: '总订单', money: 0 },
        { icon: 'icon-Dollar', tex: '总销售额', money: 0 },
        { icon: 'icon-task', tex: '今日订单数', money: 0 },
        { icon: 'icon-renminbi', tex: '今日销售额', money: 66666 }
      ]
    }
  },
  created() {},
  mounted() {
    this.getState()
  },
  methods: {
    async getState() {
      const data = await totaldata()
      console.log(data)
      this.lis[0].money = data.todayOrder
      this.lis[1].money = data.totalAmount
      this.lis[2].money = data.totalOrder
      this.lis[3].money = data.totayAmount

      // 添加数据
      var option = {
        title: {
          text: '折线图堆叠'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['订单数据', '金额数据']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单数据',
            type: 'line',
            stack: '总量',
            data: data.amountData
          },
          {
            name: '金额数据',
            type: 'line',
            stack: '总量',
            data: data.orderData
          }
        ]
      }
      // 基于准备好的dom，初始化echarts实例
      var myChart = Echarts.init(document.getElementById('main'))
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  background-color: #f0f2f5;
  min-width: 700px;
  #main {
    background-color: #fff;
    padding: 10px 0;
    width: 100%;
    min-width: 700px;
    height: 500px;
  }
  .el-row {
    margin-bottom: 20px;
    .grid-content {
      padding: 10px 0;
      border-radius: 4px;
      min-height: 80px;
      background: #fff;
      box-shadow: 0px 0px 4px #ccc;
      display: flex;
      justify-content: space-around;
      align-items: center;
      i {
        font-size: 50px;
        color: #1296db;
      }
      p:first-child {
        color: #d0d0d0;
        margin-bottom: 8px;
      }
      p:last-child {
        font-weight: 700;
        font-size: 18px;
      }
    }
  }
}
</style>
